<template>
  <el-dialog
    v-dialogDrag
    :fullscreen="isFullscreen"
    :before-close="closeForm"
    width="5.5rem"
    v-if="dialogVisible"
    :visible.sync="dialogVisible"
  >
    <div slot="title" class="header-title hd-title">
      <span>{{ dialogTitle }}</span>
      <i
        v-if="isFullscreen === false"
        class="el-icon-full-screen"
        @click="fScreen"
      ></i>

      <i v-else class="el-icon-news" @click="ifScreen"></i>
    </div>
    <el-form :model="form" :rules="rules" ref="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="快递单号：" prop="WayBillNo">
            <el-input
              v-model="form.WayBillNo"
              autocomplete="off"
              placeholder="请输入快递单号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="目的仓库：" prop="warehouse_id">
            <el-select
              style="display: block"
              v-model="form.warehouse_id"
              placeholder="请选择目的仓"
            >
              <el-option
                v-for="item in warehouse_ids"
                :key="item.val"
                :label="item.key"
                :value="item.val"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="交货方式：" prop="StockUp_type">
            <el-select
              style="display: block"
              v-model="form.StockUp_type"
              placeholder="请选择交货方式"
            >
              <el-option
                v-for="item in stockUp_types"
                :key="item.val"
                :label="item.key"
                :value="item.val"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="备注：" prop="Remarks">
            <el-input type="textarea" v-model="form.Remarks"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        style="
          color: #2c3e50;
          font-size: 16px;
          text-align: left;
          margin: 15px 0;
          font-weight: bold;
        "
      >
        备货明细
      </el-row>
      <el-row style="line-height: 40px">
        <el-col :span="11">
          <el-form-item
            label="商品SKU："
            prop="product_sku_id"
            label-width="100px"
          >
            <el-select
              @change="changeSelectVal"
              style="display: block"
              v-model="form.product_sku_id"
              filterable
              placeholder="请输入关键字搜索商品SKU"
            >
              <el-option
                v-for="item in product_skus"
                :key="item.val"
                :label="item.content + '-' + item.key"
                :value="item.val"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button style="" type="primary" size="small"
            >导入备货申请单
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :header-cell-style="{
        background: '#fafafa',
        color: '#000000D9',
        fontSize: '14px',
        padding: '6px 0',
        border: '1px solid #eee',
      }"
      :cell-style="{
        color: '#606266',
        fontSize: '12px',
        padding: '6px 0',
      }"
      :data="tableData"
      style="width: 100%"
      height="1rem"
    >
      <el-table-column
        align="left"
        type="index"
        label="#"
        width=""
      ></el-table-column>
      <el-table-column
        align="center"
        prop="sku_No"
        label="本地Sku号"
        width=""
      ></el-table-column>
      <el-table-column
        align="center"
        prop="product_title.zh"
        label="品名"
        width=""
      ></el-table-column>
      <el-table-column
        align="center"
        prop="hs_code"
        label="HSCODE"
      ></el-table-column>
      <el-table-column align="center" width="150px" prop="amount" label="数量">
        <template slot-scope="scope">
          <el-input
            @blur="blurEnvent(scope.row, scope.column)"
            @focus="focusEnvent(scope.row, scope.column)"
            v-model="scope.row.amount"
            v-if="scope.row.isShow"
          ></el-input>
          <p v-else>
            {{ scope.row.amount }}
            <el-button
              @click="editClick(scope.row, scope.column)"
              type="text"
              size="small"
              ><i class="el-icon-edit"></i>&nbsp;修改
            </el-button>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="delClick(scope.$index, scope.row)"
            type="text"
            size="small"
            ><i class="el-icon-delete"></i>&nbsp;删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeForm">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSkuList, getStockUpType, getWarehouseList } from "@/api/stockup";
import { getSkuItemNo, skuPreview } from "@/api/coupang";

export default {
  name: "StockOrder",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogTitle: {
      type: String,
      default: "",
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getWarehouseList();
        this.getStockUpType();
        this.getSkuList();
        this.getSkuItemNo();
      }
    },
  },
  data() {
    return {
      form: {},
      formLabelWidth: "80px",
      isFullscreen: false,
      tableData: [],
      warehouse_ids: [],
      stockUp_types: [],
      product_skus: [],
      sku_item_No: "",
      rules: {
        WayBillNo: [
          {
            required: true,
            message: "请输入快递单号",
            trigger: ["blur", "change"],
          },
        ],
        warehouse_id: [
          {
            required: true,
            message: "请输入目的仓库",
            trigger: ["blur", "change"],
          },
        ],
        StockUp_type: [
          {
            required: true,
            message: "请输入交货方式",
            trigger: ["blur", "change"],
          },
        ],
        product_sku_id: [
          {
            required: true,
            message: "请至少选择一个SKU",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    changeSelectVal(val) {
      this.skuPreview({
        sku_item_No: this.sku_item_No,
        product_sku_id: val,
      });
    },
    editClick(row, column) {
      if (column.label === "数量") {
        row.isShow = !row.isShow;
      }
    },
    delClick(index, row) {
      this.tableData.splice(index, 1);
    },
    focusEnvent(row, column) {
      if (column.label === "数量") {
        row.oldAmount = row.amount;
      }
    },
    blurEnvent(row, column) {
      if (column.label === "数量") {
        row.isShow = !row.isShow;
        if (row.amount !== row.oldAmount) {
        }
      }
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let obj = [];
          let flag = true;
          let reg = /^[1-9]\d*$/;
          this.tableData.forEach((item) => {
            if (item.amount > 0 && reg.test(item.amount)) {
              obj.push({ skuID: item.product_sku_id, amount: item.amount });
            } else {
              flag = false;
            }
          });
          if (flag) {
            this.$emit("submit", {
              warehouse_id: this.form.warehouse_id,
              StockUp_type: this.form.StockUp_type,
              sku_ids: obj,
              WayBillNo: this.form.WayBillNo,
              remarks: this.form.remarks,
            });
            this.closeForm();
            this.tableData = [];
          } else {
            return this.$message.error("数量不能少于一个且不能为非数字");
          }
        }
      });
    },
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
    },
    //异步请求
    //获取仓库
    async getWarehouseList() {
      const res = await getWarehouseList();
      if (res.data.status === 200) {
        this.warehouse_ids = res.data.data.warehouse_ids;
      }
    },
    //获取交货方式
    async getStockUpType() {
      const res = await getStockUpType();
      if (res.data.status === 200) {
        this.stockUp_types = res.data.data;
      }
    },
    //获取SKU下拉列表
    async getSkuList() {
      const res = await getSkuList();
      if (res.data.status === 200) {
        this.product_skus = res.data.data.product_skus;
      }
    },
    //获取SkuItemNo
    async getSkuItemNo() {
      const res = await getSkuItemNo();
      if (res.data.status === 200) {
        this.sku_item_No = res.data.data.sku_item_No;
      }
    },
    //获取列表数据
    async skuPreview(obj) {
      const res = await skuPreview(obj);
      if (res.data.status === 200) {
        let form = res.data.data;
        this.tableData.push({ ...form, isShow: false });
      }
    },
  },
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 13px;
}

::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 20px 20px 0 20px;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown
  .el-scrollbar
  .el-scrollbar__view
  .el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}

::v-deep .el-form-item__label {
  padding: 0;
  text-align: left;
}
</style>
